<template>
	<view>
		<view class="container">
			<view class="text-xl">{{article.title}}</view>
			<view style="margin: 10px 0;" class="flex align-center flex-gap-sm">
				<view v-if="article.price===0" class="cu-capsule">
					<view class='cu-tag bg-green sm'>
						<text class='cuIcon-coin'></text>
					</view>
					<view class="cu-tag line-green sm">免费</view>
				</view>
				<view v-else class="cu-capsule">
					<view class='cu-tag bg-orange sm'>
						<text class='cuIcon-coin'></text>
					</view>
					<view class="cu-tag line-orange sm">{{article.price}}金豆</view>
				</view>
				<view v-if="article.tags!==[]">适用：<text v-for="(item,index) in article.tags" :key="index"
						class="cu-tag sm line-blue">{{item}}</text></view>
			</view>
			<view class="divide"></view>
			<view v-if="article.video.url" class="margin-top-sm">
				<video id="myVideo" :src="article.video.url" show-mute-btn controls></video>
				<view class="divide"></view>
			</view>
			
			<towxml :nodes="article.content" />
			
			<view class="divide"></view>
			<view class="text-grey margin-top-sm">声明：{{baseConfig.statement}}</view>
			<view class="text-blue padding-xl text-center">
				有任何疑问或者代码定制需求请长按二维码添加微信交流，<text class="text-red">备注小程序</text>
			</view>
			<image class="concat_code" :src="baseConfig.contactCode.url" :show-menu-by-longpress="true"></image>
		</view>

		<view class="cu-bar bg-white tabbar border shop foot">
			<button class="action" open-type="contact">
				<view class="cuIcon-service text-green">
				</view> 客服
			</button>
			<view class="btn-group">
				<button @click="copy" class="cu-btn bg-blue round shadow-blur"><text class="cuIcon-copy margin-right-xs"></text>
					复制链接</button>
				<button open-type="share" class="cu-btn bg-green round shadow-blur"><text
						class="cuIcon-share margin-right-xs"></text> 分享好友</button>
			</view>
		</view>

	</view>
</template>

<script>
	import towxml from "@/static/towxml/towxml"
	import articleApi from "@/api/articleApi.js"
	import tool from "@/utils/tool.js"

	export default {
		components: {
			towxml
		},
		data() {
			return {
				article: {},
				coontactCode: null,
				baseConfig: {}
			}
		},
		onLoad(options) {
			articleApi.detail({
				id: options.id
			}).then(res => {
				this.article = res.data
				this.article.content = this.towxml(
					this.article.content, 'markdown', {
						base: "../../../static"
					})
			})
			this.baseConfig = this.$store.state
		},
		methods: {
			copy() {
				uni.setClipboardData({
					data: this.article.link, // e是你要保存的内容
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						})
					}
				})

			}
		}
	}
</script>


<style lang="scss">
	page {
		background-color: #fff;
		padding-bottom: 60px;
	}

	.container {
		padding: 14px;
	}

	.h2w__main {
		margin: 0 !important;
	}
	
	.concat_code{
		width: 150px;
		height: 150px;
		display: block;
		margin: auto;
	}
</style>